<template>
  <div class="homePage flexcenter">
    <div class="hearder m-t-20 flexac">
      <div class="tips m-b-20 m-l-20">
        <div v-if="dataList.length < 1" class="no-bound flex">
          <div class="names">
            <div class="title1 titles">请先进行单位信息备案</div>
            <div class="title2 titles">无已备案信息</div>
          </div>
          <div class="icons iconfont icon-gantanhao" />
        </div>
        <div v-else class="bound">
          <div class="title1 titles">
            单位名称：{{ dataList[0].name }}
          </div>
          <div class="title3">
            统一社会信用代码：{{ dataList[0].socialCreditCode }}
          </div>
        </div>
      </div>

      <div class="h-box">
        <div class="h-top flex">
          <h1>{{ title }}</h1>
          <div class="divider" />
        </div>
        <p class="proposal">{{ proposal }}</p>
      </div>
      <div class="main flex">
        <div class="left flex">
          <div class="left1 flex pubbox">
            <div class="cont pub flexac" @click="handleRecord">
              <div>填写</div>
              <div class="te">“单位备案”</div>
              <div>信息</div>
            </div>
            <div class="divline flex">
              <div class="line1" />
              <div class="line2" />
            </div>
          </div>

          <div class="left2 flex pubbox">
            <div class="cont1 pub flexac">
              <div class="ptsh">平台审核</div>
              <div v-if="dataList.length < 1" class="te">“未提交”</div>
              <div v-for="item in dataList" v-else :key="item.id" class="te">
                “{{
                  item.auditState === 0 ? '未审核' :
                  item.auditState === 1 ? '已审核' :
                  item.auditState === 1 ? '已拒绝' : '未提交'
                }}”
              </div>
            </div>
            <div class="divline flex">
              <div class="line1" />
              <div class="line2" />
            </div>
          </div>
        </div>

        <div class="center">
          <div class="clinebox">
            <div class="cline1 publine" />
            <div class="cline2 publine" />
            <div class="cline3 publine" />
          </div>
          <div class="colinebox">
            <div class="coline coline1" />
            <div class="coline coline2" />
            <div class="coline coline3" />
            <div class="coline coline4" />
          </div>
          <div class="contbox">
            <div class="cont3 pubcon" @click="handleWBRY">
              <span>填写</span>
              <span class="te">“维保人员”</span>
              <span>信息</span>
            </div>
            <div class="cont4 pubcon" @click="handleSYCS">
              <span>填写</span>
              <span class="te">“使用场所”</span>
              <span>信息</span>
            </div>
            <div class="cont5 pubcon" @click="handleSYDW">
              <span>填写</span>
              <span class="te">“使用单位”</span>
              <span>信息</span>
            </div>
            <div class="cont6 pubcon" @click="handleWBDT">
              <span>填写</span>
              <span class="te">“维保电梯”</span>
              <span>信息</span>
            </div>
          </div>
        </div>

        <div class="right flex">
          <div class="right1 flex pubbox">
            <div class="divline flex">
              <div class="line1" />
              <div class="line2" />
            </div>
            <div class="cont7 pub flexac">
              <div class="te dtbd">“电梯绑定”</div>
              <div
                :class="`${(bound.length > 1 || boundList.length > 1) ? (Math.round((bound.length / boundList.length) * 100 ) < 50 ? 'rate1' : 'rate2') : 'rate1'}`"
              >完成率 {{ (bound.length > 1 || boundList.length > 1) ? Math.round((bound.length / boundList.length) * 100 ) : 0 }}%
              </div>
            </div>
          </div>

          <div class="right2 flex pubbox">
            <div class="divline flex">
              <div class="line1" />
              <div class="line2" />
            </div>
            <div class="cont8 pub flexac" @click="handleBAZS">
              <div class="te zsxz">“备案证书”</div>
              <div class="te">下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <img src="@/assets/maintenance/homeBg.jpg"> -->
  </div>
</template>

<script>
// import router from '../../router'
import storage from '@/utils/storage'
import { unitfilingQueryList } from '@/api/maintenance/unitfiling'
import { elevatorQueryList } from '@/api/elevator/elevator'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      title: '维保备案操作流程指引',
      proposal: '建议您参照如下流程完成初次信息填报，填报后信息均可在对应模块进行修改和完善',
      dataList: [],
      bound: [],
      boundList: []
    }
  },
  mounted() {
    this.sysData = JSON.parse(storage.get('sysData'))
    this.userInfo = JSON.parse(storage.get('userInfo'))
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/home/index' }))
    this.getUnitiling()
    this.getElevator()
  },
  methods: {
    // 单位备案
    handleRecord() {
      this.$router.push({ path: '/query' })
    },
    // 维保人员
    handleWBRY() {
      this.sysData.filter(item => {
        if (item.id === 16) {
          if (item.displayType === 2) {
            showNotice('warning', '提示', '请先备案')
            return
          } else {
            this.$router.push({ path: '/personQuery' })
          }
        }
      })
    },
    // 使用场所
    handleSYCS() {
      this.sysData.filter(item => {
        // console.log(item)
        if (item.id === 17) {
          if (item.displayType === 2) {
            showNotice('warning', '提示', '请先备案')
            return
          } else {
            this.$router.push({ path: '/useplace/placeTypeInfo' })
          }
        }
      })
    },
    // 使用单位
    handleSYDW() {
      this.sysData.filter(item => {
        if (item.id === 34) {
          if (item.displayType === 2) {
            showNotice('warning', '提示', '请先备案')
            return
          } else {
            this.$router.push({ path: '/useUnit/unitSelect' })
          }
        }
      })
    },
    // 维保电梯
    handleWBDT() {
      this.sysData.filter(item => {
        if (item.id === 50) {
          if (item.displayType === 2) {
            showNotice('warning', '提示', '请先备案')
            return
          } else {
            this.$router.push({ path: '/bindSelect' })
          }
        }
      })
    },
    // 备案证书
    handleBAZS() {
      this.sysData.filter(item => {
        // console.log(item)
        if (item.id === 39) {
          if (item.displayType === 2) {
            showNotice('warning', '提示', '请先备案')
            return
          } else {
            this.$router.push({ path: '/maintenanCompany/certificate' })
          }
        }
      })
    },
    // 获取单位备案列表
    getUnitiling() {
      // console.log(this.userInfo)
      unitfilingQueryList('', '', this.userInfo.orgList[0].id, 1, 100000).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.dataList = res.data
        }
      })
    },
    // 获取电梯列表
    getElevator() {
      elevatorQueryList('', '', '', 1, 100000000, '', '', '', '').then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.bound = res.data.filter(item => {
            // console.log(item)
            if (item.bindState === 3) {
              return item
            }
          })
          this.boundList = res.data
          // console.log(this.bound.length)
          // console.log(this.boundList.length)
        }
      })
    },
    goPush() {
      //  router.push("/wxLogin")
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
.homePage {
  color: #3cb371;
  .hearder {
    width: 100%;
    .tips {
      width: 500px;
      height: 160px;
      border: 1px solid #3cb371;
      border-radius: 20px;
      box-shadow: 10px 10px 5px rgba($color: #3cb371, $alpha: .2);
      .titles {
        font-size: 28px;
        text-indent: 20px;
      }
      .title1 {
        line-height: 60px;
      }
      .title2 {
        color: #CCCCCC;
        line-height: 100px;
      }
      .no-bound {
        .names {}
        .icons {
          margin: 30px 0 0 110px;
          text-align: center;
          font-size: 60px;
          font-weight: 700;
        }
      }
      .bound {
        .title3 {
          line-height: 100px;
          font-size: 24px;
          text-indent: 20px;
        }
      }
    }
    .h-box {
      width: 100%;
      margin: 0 0 0 20px;
      .h-top {
      width: 96%;
      height: 42px;
      align-items: center;
      position: relative;
      h1 {
        width: 340px;
      }
      .divider {
        flex: 1;
        height: 4px;
        // width: 100%;
        // padding: 0 ;
        display: inline-block;
        line-height: 50px;
        border: 2px solid #3cb371;
        border-radius: 3px;
      }
    }
    .proposal {}
    }
    .main {
      width: 100%;
      justify-content: center;
      margin-top: 100px;
      .te {
        font-size: 20px;
        font-weight: 700;
      }
      .pub {
        padding: 40px;
        padding-top: 0;
        height: 90px;
        border: 1px solid #3cb371;
        border-radius: 15px;
        text-align: center;
      }
      .pubbox {
        align-items: center;
      }
      .divline {
        align-items: center;
        .line1 {
          width: 60px;
          height: 2px;
          border: 1px solid #3cb371;
        }
        .line2 {
          width: 10px;
          height: 10px;
          border-left: 10px solid #3cb371;
          border-top: 10px solid #ffffff;
          border-bottom: 10px solid #ffffff;
        }
      }
      .left {
        .left1 {}

        .cont {
          line-height: 28px;
          cursor: pointer;
        }
        .cont1 {
          line-height: 30px;
          .ptsh {
            margin-top: 10px;
          }
        }
      }
      .center {
        position: relative;
        .clinebox {
          .publine {
            width: 400px;
            height: 100px;
            border: 1px solid #3cb371;
          }
          .cline1 {}
          .cline2 {
            border-top: 0;
          }
          .cline3 {
            border-top: 0;
          }
        }
        .colinebox {
          .coline {
            width: 10px;
            height: 10px;
            border-left: 10px solid #3cb371;
            border-top: 10px solid #ffffff;
            border-bottom: 10px solid #ffffff;
            position: absolute;
            left: 90px;
          }
          .coline1 {
            top: -9px;
          }
          .coline2 {
            top: 90px;
          }
          .coline3 {
            top: 190px;
          }
          .coline4 {
            bottom: -9px;
          }
        }
        .contbox {
          .pubcon {
            width: 200px;
            height: 80px;
            border: 1px solid #3cb371;
            border-radius: 15px;
            position: absolute;
            background: #ffffff;
            text-align: center;
            line-height: 70px;
            left: 100px;
          }
          .cont3 {
            top: -38px;
            cursor: pointer;
          }
          .cont4 {
            top: 60px;
            cursor: pointer;
          }
          .cont5 {
            top: 160px;
            cursor: pointer;
          }
          .cont6 {
            bottom: -38px;
            cursor: pointer;
          }
        }
      }
      .right {
        .cont7 {
          line-height: 35px;
          .dtbd {
            margin-top: 10px;
          }
        }
        .rate1 {
          color: #ff0000
        }
        .rate2 {
          color: #DAA520
        }
        .cont8 {
          line-height: 35px;
          cursor: pointer;
          .zsxz {
            margin-top: 10px;
          }
        }
      }
    }
  }

  img {
    width: 80%;
    margin-top: -70px;
  }
}
</style>
